<template>
	<view class="logo-wrap"  pt-20px px-20px pb-20px>
		<view class="vip-card" :style="`background-color: ${iconColor}`">
			<view class="text-lg pb-5px">{{tabs[current]}}</view>
			<view class="text-xs">升级汇塑云商会员，尽享海量权益</view>
			<image class="image" src="@/static/images/vip.svg" mode="widthFix" />
		</view>
	</view>

	<view class="py-10px mb-1px bg-white sticky top-0 z-100 tabs-control text-base">
		<uni-segmented-control :current="current" :values="tabs" style-type="text" active-color="#292421" @clickItem="onTabsClick" />
	</view>
	<view class="page page-vip">
		<view class="functions">
			<uni-grid :column="3" :showBorder="false" :square="false" :highlight="false">
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view class="icon icon-vip" text-4xl :style="`color: ${iconColor}`"></view>
						<view>会员标识</view>
						<view text-xs c-gray>彰显贵族身份</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view class="icon icon-product" text-4xl :style="`color: ${iconColor}`"></view>
						<view>发布产品</view>
						<view text-xs c-gray v-if="!current">可发布5个商品</view>
						<view text-xs c-gray v-else-if="current == 1">可发布10个商品</view>
						<view text-xs c-gray v-else>可发布20个商品</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view class="icon icon-child-account" text-4xl :style="`color: ${iconColor}`"></view>
						<view>企业广告位</view>
						<view text-xs c-gray v-if="!current">宣传7天</view>
						<view text-xs c-gray v-else-if="current == 1">宣传15天</view>
						<view text-xs c-gray v-else>宣传30天</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view class="icon icon-recommend" text-4xl :style="`color: ${iconColor}`"></view>
						<view>首页商品推荐</view>
						<view text-xs c-gray v-if="!current">推荐1个</view>
						<view text-xs c-gray v-else-if="current == 1">推荐3个</view>
						<view text-xs c-gray v-else>推荐5个</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view class="icon icon-customer" text-4xl :style="`color: ${iconColor}`"></view>
						<view>1V1专属客服</view>
						<view text-xs c-gray>1V1专属客服</view>
					</view>
				</uni-grid-item>

				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view v-if="current" class="icon icon-3in1" text-4xl :style="`color: ${iconColor}`"></view>
						<view v-else class="icon icon-3in1 c-gray-4" text-4xl ></view>
						<view>店铺装修</view>
						<view text-xs c-gray>首页店铺装修设计</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view v-if="current" class="icon icon-sale" text-4xl :style="`color: ${iconColor}`"></view>
						<view v-else class="icon icon-sale c-gray-4" text-4xl ></view>
						<view>寄售商品</view>
						<view text-xs c-gray v-if="!current">寄售商品售卖</view>
						<view text-xs c-gray v-else-if="current == 1">寄售商品售卖1个</view>
						<view text-xs c-gray v-else>寄售商品售卖2个</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view v-if="current == 2" class="icon icon-video" text-4xl :style="`color: ${iconColor}`"></view>
						<view v-else class="icon icon-video c-gray-4" text-4xl ></view>
						<view>探厂视频</view>
						<view text-xs c-gray>拍摄3分钟</view>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view text-center pt-20px  text-sm>
						<view v-if="current == 2" class="icon icon-figure" text-4xl :style="`color: ${iconColor}`"></view>
						<view v-else class="icon icon-figure c-gray-4" text-4xl ></view>
						<view>企业访谈</view>
						<view text-xs c-gray>企业访谈1篇</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view center justify-between px-20px py-25px>
			<view>开通年限</view>
			<view>{{ tabsValue[current]?.years }}年</view>
		</view>
		<divider ></divider>

		<view class="bottoms center">
			<view class="btn-left" @click="consult()">咨询客服</view>
			<view class="btn-right" @click="buyVip">立即开通 ￥{{ tabsValue[current]?.money }}</view>
		</view>

	</view>

</template>

<script setup>
	import api from '@/api'
	import { computed, ref } from 'vue'
	import { consult } from '@/common/utils'
	import { useUserStore, useBaseStore } from '@/stores/user'
	const user = useUserStore()
	const {baseInfo} = useBaseStore()

	uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#292421',
    animation: {
        duration: 400,
        timingFunc: 'easeIn'
    }
	})

	const current = ref(0)
	const tabsValue = ref(baseInfo.member_buy_vip)

	const iconColor = computed(() => {
		return {
			0: '#ff9921',
			1: '#87ceeb',
			2: '#a020f0'
		}[current.value]
	})

	const tabs = computed(() => {
		return tabsValue.value.map( i => i.name )
	})

	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
	}

	const buyVip = async () => {
		const wxpay_data = await api.wxpay({vipcode: tabsValue.value[current.value].ident})
		const { errMsg } = await uni.requestPayment(wxpay_data);
		if(errMsg.includes("requestPayment:ok")) {
			uni.showToast({
				icon: 'none',
				title: '恭喜你，购买成功'
			})
			const member_info = await api.getMemberInfo()
			uni.setStorageSync('member', member_info)
			user.setUser(member_info)
			uni.navigateBack()
		}
	}

</script>

<style lang="scss">
.logo-wrap {
	background: #292421;
	.vip-card {
		border-radius: 10px 10px 0 0;
		position: relative;
		padding: 20px;
		box-sizing: border-box;
		.image {
			width: 50px;
			height: 50px;
			position: absolute;
			right: 20px;
			top: 25px;
		}
	}
}

.tabs-control {
	border-radius: 20px 20px 0 0;
	margin-top: -20px;
}

.page-vip {
	min-height: unset;
	.bottoms  {
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 15px 20px;
		box-sizing: border-box;
		background: white;
		font-size: 38upx;
		width: 100%;
		box-shadow: 0 0 8px 0px #ccc;
		.btn-left {
			border-radius: 100px 0 0 100px;
			background-color: #292421;
			color: wheat;
			width: 30%;
			text-align: center;
			padding: 18upx 0;
		}
		.btn-right {
			border-radius: 0 100px 100px 0;
			background-color: wheat;
			color: #292421;
			width: 66%;
			text-align: center;
			padding: 18upx 0;
		}
	}
}

</style>

